<template>
<div class="card" >
    <div  class="div1">
        <div class="frontBg" :style="{'background-image':`url(${card.url})`}"></div>
    </div>
    <div  class="div2">
       <div class="title">
           <span class="tip">冷知识</span>
           <span class="a">{{card.title}}</span>
       </div>
        <div class="article">{{card.introduce}}</div>
        <el-button @click="gotoArticle" size="mini" class="readmore" round>阅读更多</el-button>
    </div>
    
</div>
</template>
<style scoped>
.card {
    width: 100%;
    height: 100%;
    background: transparent;
    position: relative;
    perspective:1500.9px;
}
.div1,.div2 {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  backface-visibility:hidden;
  transition:all .8s;
}
.div1 {
   transform:rotateY(0);
}
.div2 {
  background: #fff;
  transform:rotateY(180deg);
  overflow: hidden;
}
.card:hover .div1{
  transform:rotateY(-180deg);
}
.card:hover .div2{
    z-index: 1000;
    transform:rotateY(0deg);
}
.frontBg,.img {
  height: 100%;
  background-size: cover;
}
.img {
    height: 50%;
}
.title {
    padding: 5px;
}
.a {
    margin-left: 10px;
    color: #333;
    font-size: 22px;
    text-decoration: none;
}
.article {
    padding: 5px;
    font-size: 14px;
    color: #888;
    height: 70%;
    overflow: hidden;
}
.tip {
    padding: 0 2px;
    color: #f5f5f5;
    font-size: 12px;
    background-color: #52a3f5;
}
.div2 >>> .el-button {
    position: absolute;
    left: 50%;
    bottom: 5%;
    transform: translateX(-50%);
}
 @media screen and (max-width: 1586px){
    .a {
      font-size: 16px;
    }
    .article {
        font-size: 12px;
    }
  }
</style>
<script>
export default {
    props: {
        card: {
            type: Object,
            default: () => {}
        }
    },
    methods: {
        gotoArticle() {
            this.$router.push(`/pc/scienceAticle?article_id=${this.card.aid}`)
            // let routes = this.$router.resolve({path:`/pc/scienceAticle?article_id=${this.card.aid}`});
            // window.open(routes.href,'_blank');

        }
    }
}
</script>